<template>
  <van-cell
    :title="title"
    :border="border"
    class="grid-cell"
  >
    <div
      class="grid-cell__medias"
      v-if="medias.length>0"
    >
      <div
        class="grid-cell__medias-thumb"
        v-for="(media,index) in medias"
        :key="index"
      >
        <scale-image
          :src="media.path"
          v-if="media.path"
        />
      </div>

    </div>
    <div class="grid-cell__description">{{description}}</div>
  </van-cell>
</template>

<script>
import ScaleImage from '@/components/scaleImage'
export default {
  components: {
    ScaleImage
  },
  name: 'grid',
  props: {
    data: {
      type: Object
    },
    title: {
      type: String,
      default: ''
    },
    medias: Array,
    description: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
.grid-cell {
  &__description {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    line-height: initial;
  }
  &__medias {
    width: 68%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 5px;
    overflow: hidden;
    &-thumb {
      flex-basis: 33.33333%;
      padding-right: 1px;
      padding-top: 1px;
      &:nth-child(-n + 3) {
        padding-top: 0;
      }
    }
  }
  /deep/ .van-cell {
    flex-direction: column;
    &__title {
      font-size: 16px;
      padding-bottom: 10px;
    }
    &__value {
      flex: none;
      -webkit-flex: none;
      text-align: left;
    }
  }
}
</style>